<template>
  <div class="BENodeSetting" id="BENodeSetting">
    <base-form :formState="formState" ref="Setting">
    </base-form>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch, onMounted, nextTick, onUnmounted } from "vue";
import baseForm from '@/components/form/baseForm.vue';
import { cloneDeep } from 'lodash';

import { lineConfig } from './lineSettingConfig';
// ts
interface propoties {
  [propName: string]: any;
}
// props
const props = defineProps({
  currentNode: {
    type: Object,
    default: {}
  }
})
//emit
const emits = defineEmits(['changeBENodeName']);

// data
const Setting = ref();
const lineData = ref<propoties>(props.currentNode);
const formState = ref(cloneDeep(lineConfig));
//watch
watch(() => props.currentNode, (newVal, oldVal) => {
  lineData.value = newVal;
  let form = newVal.form;
  formState.value.forEach((item) => {
    item.children.forEach((data: propoties) => {
      if (data.param) {
        data.value = form[data.param];
      }
      if (data.param == 'actionCode') {
        data.value = newVal[data.param];
        data.options = form.actionOptions;
      }
      if (Object.keys(data).includes('VIF')) {
        if (newVal.nodeType == 'beginline') {
          data.VIF.value = false;
        } else {
          data.VIF.value = true;
        }
      }

    })
  });

}, { immediate: true, deep: true });

watch(() => cloneDeep(formState.value), (newVal, oldVal) => {
  if (newVal != oldVal) {
    let form = lineData.value.form;
    formState.value.forEach((item) => {
      item.children.forEach((data: propoties) => {
        if (data.param) {
          form[data.param] = data.value;
        }
        if (data.param == 'actionCode') {
          lineData.value[data.param] = data.value;
        }
        if (data.param == 'requireReviewComment') {
          console.log(lineData.value.form['requireReviewComment']);
        }
      })
    });
  }
});
// defineProps
defineExpose({ Setting, formState });
</script>

<style lang="less">
#BENodeSetting {
  .ant-form-item {
    flex-direction: column;
    margin-left: 0;
    height: 66px;
    height: max-content;
    display: block;

    .ant-form-item-label {
      justify-content: start;
      display: flex;
      width: 100%;
    }

    .ant-form-item-control {
      width: 304px;

      .ant-input {
        width: 100%;
      }
    }

    .ant-select {
      width: 100%;
    }
  }

  .ant-form-item:nth-last-of-type(2) {
    height: 99px;
  }

  .justTitle {
    height: 14px;
    line-height: 14px;
    margin-bottom: -8px;

    .ant-form-item-control-input {
      min-height: 14px;

      .ant-form-item-control-input-content {
        text-align: left;

      }
    }
  }

  .ant-checkbox-group {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    .ant-checkbox-wrapper {
      margin-left: 0;
    }
  }

  .baseTitle {
    padding-top: 32px;
    font-size: 14px;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 600;
    margin-bottom: -8px;
    color: rgba(0, 0, 0, 0.85);
    margin-bottom: 16px;
  }

  .notify {
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    color: rgba(0, 0, 0, 0.85);
    line-height: 22px;
    margin-bottom: 8px;
  }

  .aduitMassege {
    margin-top: 20px;
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    color: rgba(0, 0, 0, 0.85);
    line-height: 22px;

  }
}

.notifyOptions_tips {
  width: 187px;
}
</style>